বুটস্ট্রাপ ৫-এ বাটন (Buttons) এবং বাটন গ্রুপস (Button Groups) ব্যবহারের মাধ্যমে আপনি সহজেই ইন্টারেকটিভ এবং সুন্দর বাটন তৈরি করতে পারেন। বাটনগুলো বিভিন্ন স্টাইল, সাইজ, রঙ এবং কার্যকারিতার সাথে কাস্টমাইজ করা যায়। এছাড়া, বাটন গ্রুপস ব্যবহার করে আপনি একাধিক বাটনকে একসাথে গ্রুপ করে একটি সুসংগঠিত বাটন ক্লাস্টার তৈরি করতে পারেন।

বুটস্ট্রাপ ৫ এর বাটনস (Buttons)

বুটস্ট্রাপ ৫-এ বিভিন্ন ধরনের বাটন ক্লাস রয়েছে, যা বিভিন্ন কার্যকারিতা এবং স্টাইল প্রদান করে। বাটনগুলো আপনি btn ক্লাস দিয়ে তৈরি করতে পারেন এবং বিভিন্ন স্টাইলের জন্য অতিরিক্ত ক্লাস যুক্ত করতে পারেন।

বুটস্ট্রাপ ৫ বাটন ক্লাস

• btn-primary: প্রাথমিক (primary) বাটন, সাধারণত গুরুত্বপূর্ণ অ্যাকশন বোঝাতে ব্যবহৃত হয়।
• btn-secondary: সেকেন্ডারি বাটন, সাধারণত কম গুরুত্বপূর্ণ অ্যাকশন বোঝাতে ব্যবহৃত হয়।
• btn-success: সাফল্য বা সফলতার জন্য ব্যবহৃত হয় (যেমন, সাবমিট/সেভ)।
• btn-danger: বিপদ বা সতর্কতার জন্য ব্যবহৃত হয় (যেমন, ডিলিট/ক্যানসেল)।
• btn-warning: সতর্কতার জন্য ব্যবহৃত হয় (যেমন, সাবধান).
• btn-info: তথ্য প্রদানের জন্য ব্যবহৃত হয়।
• btn-light: লাইট/হালকা রঙের বাটন।
• btn-dark: অন্ধকার রঙের বাটন।
• btn-link: একটি লিংক বাটন, যা দেখতে হাইপারলিংক মতো হয়।

উদাহরণ: বুটস্ট্রাপ ৫ এর বাটন

<div class="container">
    <button class="btn btn-primary">প্রাথমিক বাটন</button>
    <button class="btn btn-secondary">সেকেন্ডারি বাটন</button>
    <button class="btn btn-success">সফল বাটন</button>
    <button class="btn btn-danger">বিপদ বাটন</button>
    <button class="btn btn-warning">সতর্কতা বাটন</button>
    <button class="btn btn-info">তথ্য বাটন</button>
    <button class="btn btn-light">হালকা বাটন</button>
    <button class="btn btn-dark">অন্ধকার বাটন</button>
    <button class="btn btn-link">লিংক বাটন</button>
</div>

এখানে, আপনি বিভিন্ন ধরনের বাটন দেখতে পাবেন, প্রতিটি বাটনের রঙ এবং স্টাইল ভিন্ন হবে।

বুটস্ট্রাপ ৫ এর বাটন গ্রুপস (Button Groups)

বাটন গ্রুপস আপনাকে একাধিক বাটনকে একসাথে গ্রুপ করে একটি সুসংগঠিত বাটন ক্লাস্টার তৈরি করতে সহায়তা করে। এতে ব্যবহারকারীরা একাধিক অপশন বেছে নিতে পারে। বুটস্ট্রাপ ৫ এ বাটন গ্রুপগুলি btn-group ক্লাস দিয়ে তৈরি করা হয়।

বাটন গ্রুপস তৈরি করা

<div class="container">
    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-primary">বাটন ১</button>
        <button type="button" class="btn btn-primary">বাটন ২</button>
        <button type="button" class="btn btn-primary">বাটন ৩</button>
    </div>
</div>

এই উদাহরণে তিনটি বাটন একই গ্রুপে একত্রিত করা হয়েছে, যা একসাথে দেখাবে। btn-group ক্লাস ব্যবহার করে বাটনগুলোকে একসাথে গ্রুপ করা হয়েছে।

সাইজ কাস্টমাইজেশন

বুটস্ট্রাপ ৫ এর বাটনগুলোর সাইজ কাস্টমাইজ করার জন্য কিছু ক্লাস রয়েছে। এগুলি ব্যবহার করে আপনি বাটনের আকার ছোট (smaller), বড় (larger) বা সাধারণ আকারে (default) পরিবর্তন করতে পারবেন।

• btn-lg: বড় বাটন।
• btn-sm: ছোট বাটন।
• btn-block: বাটনকে পুরো প্রস্থে প্রসারিত করে।

উদাহরণ: বাটন সাইজ কাস্টমাইজেশন

<div class="container">
    <button class="btn btn-primary btn-lg">বড় বাটন</button>
    <button class="btn btn-secondary btn-sm">ছোট বাটন</button>
    <button class="btn btn-success btn-block">সম্পূর্ণ প্রস্থ বাটন</button>
</div>

এখানে:

• btn-lg: বড় বাটন
• btn-sm: ছোট বাটন
• btn-block: বাটন পুরো প্রস্থে প্রসারিত হবে

বাটন টুলটিপ (Button Tooltip)

বুটস্ট্রাপ ৫ বাটনে টুলটিপ যোগ করার জন্য আপনি data-bs-toggle এবং title অ্যাট্রিবিউট ব্যবহার করতে পারেন।

<button type="button" class="btn btn-info" data-bs-toggle="tooltip" title="এটি একটি টুলটিপ">টুলটিপ বাটন</button>

এটি একটি টুলটিপ বাটন তৈরি করবে, যেটি মাউস হভার করলে একটি টুলটিপ দেখাবে।

সারাংশ

বুটস্ট্রাপ ৫ এর বাটন এবং বাটন গ্রুপস সহজে রেসপন্সিভ, ইন্টারেকটিভ এবং সুন্দর বাটন তৈরি করতে সহায়ক। বাটনগুলোর মাধ্যমে আপনি বিভিন্ন ধরনের অ্যাকশন এবং প্রতিক্রিয়া ব্যবহারকারীকে প্রদান করতে পারেন। বাটন গ্রুপস ব্যবহারে একাধিক বাটনকে সুসংগঠিতভাবে উপস্থাপন করা যায়, যা ওয়েব অ্যাপ্লিকেশন বা ওয়েবসাইটে সহজ নেভিগেশন ও কার্যকারিতা প্রদান করে।

বুটস্ট্রাপ ৫ এ Button স্টাইলিং এবং কাস্টমাইজেশন সহজেই করা যায়। বুটস্ট্রাপ প্রি-ডিফাইন্ড ক্লাস প্রদান করে, যা বিভিন্ন স্টাইল, সাইজ, রঙ এবং আউটলাইন বোতাম তৈরিতে সহায়তা করে। এছাড়া, আপনাকে প্রয়োজন অনুযায়ী কাস্টম সিএসএস দিয়ে আরো উন্নত কাস্টমাইজেশন করতে হতে পারে।

বুটস্ট্রাপ ৫ এর Button ক্লাস

বুটস্ট্রাপ ৫ এ বিভিন্ন button ক্লাস রয়েছে যা আপনাকে বিভিন্ন ধরনের বোতাম তৈরি করতে সহায়তা করবে। সাধারণভাবে btn ক্লাস ব্যবহার করে একটি বোতাম তৈরি করা হয় এবং তার সাথে অন্যান্য ক্লাস যোগ করে স্টাইল করা হয়।

১. Button Types (বোতামের ধরণ)

বুটস্ট্রাপ ৫ এ বিভিন্ন button types রয়েছে:

• btn-primary: প্রাথমিক বোতাম (সবচেয়ে জনপ্রিয় স্টাইল)
• btn-secondary: সেকেন্ডারি বোতাম
• btn-success: সফল বোতাম (সবুজ)
• btn-danger: বিপদজনক বোতাম (লাল)
• btn-warning: সতর্কতা বোতাম (হলুদ)
• btn-info: তথ্য বোতাম (নীল)
• btn-light: হালকা বোতাম
• btn-dark: গা dark ় বোতাম
• btn-link: লিঙ্ক বোতাম

<button class="btn btn-primary">প্রাথমিক বোতাম</button>
<button class="btn btn-secondary">সেকেন্ডারি বোতাম</button>
<button class="btn btn-success">সফল বোতাম</button>
<button class="btn btn-danger">বিপদজনক বোতাম</button>
<button class="btn btn-warning">সতর্কতা বোতাম</button>
<button class="btn btn-info">তথ্য বোতাম</button>
<button class="btn btn-light">হালকা বোতাম</button>
<button class="btn btn-dark">গা dark ় বোতাম</button>
<button class="btn btn-link">লিঙ্ক বোতাম</button>

২. Button Size (বোতামের আকার)

বুটস্ট্রাপ ৫ এ বোতামের আকার কাস্টমাইজ করতে btn-lg (বড়), btn-sm (ছোট), এবং btn-block (ফুল-প্রস্থ) ক্লাস ব্যবহার করা হয়।

• btn-lg: বড় বোতাম
• btn-sm: ছোট বোতাম
• btn-block: পুরো প্রস্থের বোতাম (ফুল-প্রস্থ)

<button class="btn btn-primary btn-lg">বড় বোতাম</button>
<button class="btn btn-secondary btn-sm">ছোট বোতাম</button>
<button class="btn btn-success btn-block">ফুল-প্রস্থ বোতাম</button>

৩. Button Outline (আউটলাইন বোতাম)

বুটস্ট্রাপ ৫ এ আউটলাইন বোতামও ব্যবহার করা যেতে পারে। আউটলাইন বোতাম সাধারণত নির্দিষ্ট রঙের বর্ডার এবং ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড নিয়ে আসে। এর জন্য btn-outline-* ক্লাস ব্যবহার করা হয়।

• btn-outline-primary
• btn-outline-secondary
• btn-outline-success
• btn-outline-danger
• btn-outline-warning
• btn-outline-info
• btn-outline-light
• btn-outline-dark

<button class="btn btn-outline-primary">আউটলাইন প্রাথমিক</button>
<button class="btn btn-outline-secondary">আউটলাইন সেকেন্ডারি</button>
<button class="btn btn-outline-success">আউটলাইন সফল</button>
<button class="btn btn-outline-danger">আউটলাইন বিপদজনক</button>
<button class="btn btn-outline-warning">আউটলাইন সতর্কতা</button>
<button class="btn btn-outline-info">আউটলাইন তথ্য</button>
<button class="btn btn-outline-light">আউটলাইন হালকা</button>
<button class="btn btn-outline-dark">আউটলাইন গা dark ়</button>

Button কাস্টমাইজেশন

বুটস্ট্রাপ ৫ এর বোতাম কাস্টমাইজ করতে, আপনি CSS ব্যবহার করে বোতামের স্টাইল আরও উন্নত করতে পারেন।

১. Button Hover Effects (বোতাম হোভার ইফেক্ট)

বোতামের উপর মাউস রাখলে কোন এফেক্ট প্রয়োগ করতে চাইলে আপনি সিএসএস ব্যবহার করতে পারেন:

<button class="btn btn-primary" id="hover-btn">হোভার করুন</button>

<style>
    #hover-btn:hover {
        background-color: #0056b3; /* বোতামের ব্যাকগ্রাউন্ড রঙ পরিবর্তন */
        color: white; /* টেক্সটের রঙ পরিবর্তন */
    }
</style>

২. Custom Button with Icons (আইকন সহ কাস্টম বোতাম)

বোতামে আইকন ব্যবহার করতে Font Awesome বা অন্য কোন আইকন লাইব্রেরি ব্যবহার করতে পারেন:

<button class="btn btn-success">
    <i class="fas fa-check"></i> সফল
</button>

এখানে <i> ট্যাগের মধ্যে আইকন ক্লাস দেয়া হয়েছে।

৩. Custom Button Style (কাস্টম বোতাম স্টাইল)

আপনি আপনার নিজের বোতামের স্টাইলও তৈরি করতে পারেন সিএসএসের মাধ্যমে:

<button class="btn" style="background-color: #ff5733; color: white; border-radius: 20px;">
    কাস্টম বোতাম
</button>

এখানে বোতামের ব্যাকগ্রাউন্ড, টেক্সট রঙ এবং বর্ডার রেডিয়াস কাস্টমাইজ করা হয়েছে।

সারাংশ

বুটস্ট্রাপ ৫ এ Button ক্লাস ব্যবহার করে সহজেই স্টাইলিং ও কাস্টমাইজেশন করা যায়। আপনি button types, sizes, outlines, hover effects, এবং custom styles ব্যবহার করে আপনার ওয়েবসাইটে বোতামগুলোর ডিজাইন এবং কার্যকারিতা কাস্টমাইজ করতে পারেন।

বুটস্ট্রাপ ৫ এ বাটন সাইজ এবং ডিজেবল বাটন কাস্টমাইজ করা খুবই সহজ। বুটস্ট্রাপের Button Size এবং Disabled Buttons ব্যবহার করে আপনি আপনার ওয়েবসাইটের বাটনগুলোর আকার এবং কার্যক্ষমতা নিয়ন্ত্রণ করতে পারবেন। এগুলো ডিজাইন কাস্টমাইজেশনের জন্য খুবই গুরুত্বপূর্ণ।

Button Size (বাটন সাইজ)

বুটস্ট্রাপ ৫ বিভিন্ন আকারের বাটন প্রোভাইড করে যা আপনি আপনার প্রোজেক্টে ব্যবহার করতে পারেন। বাটন সাইজ কাস্টমাইজ করতে মূলত btn-lg, btn-sm, এবং btn (ডিফল্ট আকার) ক্লাস ব্যবহার করা হয়।

বাটন সাইজের ক্লাস:

• btn: ডিফল্ট সাইজের বাটন।
• btn-lg: বড় আকারের বাটন।
• btn-sm: ছোট আকারের বাটন।

উদাহরণ: বাটন সাইজ

<button class="btn btn-primary">ডিফল্ট সাইজ বাটন</button>
<button class="btn btn-primary btn-lg">বড় আকারের বাটন</button>
<button class="btn btn-primary btn-sm">ছোট আকারের বাটন</button>

এখানে:

• btn-primary: প্রাইমারি রঙের বাটন।
• btn-lg: বড় আকারের বাটন।
• btn-sm: ছোট আকারের বাটন।

Disabled Buttons (ডিজেবল বাটন)

বুটস্ট্রাপ ৫ এ আপনি সহজেই disabled (নিষ্ক্রিয়) বাটন তৈরি করতে পারেন, যা ব্যবহারকারীর ইন্টারঅ্যাকশনকে প্রতিরোধ করে। বাটনটিকে ডিজেবল করতে disabled অ্যাট্রিবিউট বা btn-disabled ক্লাস ব্যবহার করা হয়। ডিজেবল বাটন টিপলে কোনো অ্যাকশন হবে না এবং বাটনের স্টাইলও পরিবর্তিত হবে।

উদাহরণ: ডিজেবল বাটন

<button class="btn btn-primary" disabled>নিষ্ক্রিয় বাটন</button>
<button class="btn btn-secondary" disabled>আরেকটি নিষ্ক্রিয় বাটন</button>

এখানে:

• disabled অ্যাট্রিবিউট ব্যবহার করে বাটনটিকে নিষ্ক্রিয় করা হয়েছে।

Custom Disabled Button Styling (কাস্টম ডিজেবল বাটন স্টাইল)

যদি আপনি ডিজেবল বাটনের স্টাইল কাস্টমাইজ করতে চান, তাহলে CSS ব্যবহার করে আপনি বাটনের রঙ এবং স্টাইল পরিবর্তন করতে পারেন। যেমন:

<style>
    .btn-disabled {
        background-color: #d6d6d6;
        border-color: #d6d6d6;
        color: #a0a0a0;
    }
</style>

<button class="btn btn-primary btn-disabled" disabled>কাস্টম ডিজেবল বাটন</button>

এখানে:

• btn-disabled ক্লাস ব্যবহার করে ডিজেবল বাটনের জন্য কাস্টম রঙ এবং স্টাইল সেট করা হয়েছে।

Summary

• Button Size: বুটস্ট্রাপ ৫ এ বাটনের আকারের জন্য btn-lg, btn-sm, এবং btn ক্লাস ব্যবহার করা হয়। এতে আপনি সহজেই বাটনের আকার কাস্টমাইজ করতে পারেন।
• Disabled Buttons: বাটনকে ডিজেবল করতে disabled অ্যাট্রিবিউট বা btn-disabled ক্লাস ব্যবহার করা হয়। ডিজেবল বাটন ব্যবহারকারীকে কোনো ইনপুট বা অ্যাকশন নেয়ার অনুমতি দেয় না।

বুটস্ট্রাপ ৫ এ Button Groups ব্যবহার করে আপনি একাধিক বোতামকে একটি গ্রুপে একত্রিত করতে পারেন। এটি ব্যবহারকারীদের জন্য একাধিক অপশনকে সুন্দরভাবে প্রদর্শন করার একটি কার্যকর উপায়। বিশেষ করে যখন একাধিক অপশন একসাথে প্রয়োজন হয়, তখন বোতাম গ্রুপটি ব্যবহার করা হয়, যা অনেক বেশি অ্যাক্সেসযোগ্য এবং ব্যবহারকারী বান্ধব।

বুটস্ট্রাপের Button Groups বিভিন্ন ধরনের উপাদানের জন্য ব্যবহৃত হতে পারে, যেমন সাধারণ বোতাম, ড্রপডাউন বোতাম, টুলবার ইত্যাদি।

বেসিক Button Group

বুটস্ট্রাপ ৫ এ button group তৈরি করতে, আপনাকে btn-group ক্লাস ব্যবহার করতে হবে। এটি একাধিক বোতামকে একসাথে সাজায় এবং তাদের মধ্যে সীমানা বা সীমারেখা সরিয়ে দেয়।

উদাহরণ: বেসিক Button Group

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Button 1</button>
  <button type="button" class="btn btn-primary">Button 2</button>
  <button type="button" class="btn btn-primary">Button 3</button>
</div>

এখানে তিনটি বোতাম একসাথে primary ক্লাসে সাজানো হয়েছে। btn-group ক্লাসের মাধ্যমে এই বোতামগুলো একত্রিত করা হয়েছে।

Vertical Button Group (ভারটিক্যাল গ্রুপ)

যদি আপনি বোতামগুলোকে উল্লম্বভাবে (vertical) সাজাতে চান, তাহলে btn-group-vertical ক্লাস ব্যবহার করতে হবে। এটি ব্যবহারকারী ইন্টারফেসে বোতামগুলোকে একটি কলামে সাজায়।

উদাহরণ: Vertical Button Group

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-secondary">Button 1</button>
  <button type="button" class="btn btn-secondary">Button 2</button>
  <button type="button" class="btn btn-secondary">Button 3</button>
</div>

এখানে বোতামগুলো উল্লম্বভাবে (vertical) সাজানো হয়েছে, যা আরও স্থান সাশ্রয়ী এবং সহজে ব্যবহৃত হয়।

Button Group with Dropdown (ড্রপডাউন সহ)

বুটস্ট্রাপে, button group এর মধ্যে dropdown অন্তর্ভুক্ত করা যেতে পারে, যা ব্যবহারকারীদের একাধিক অপশন নির্বাচন করতে সহায়তা করে। ড্রপডাউন বোতামটি সাধারণত একাধিক অপশন বা অ্যাকশন প্রদর্শন করতে ব্যবহৃত হয়।

উদাহরণ: Button Group with Dropdown

<div class="btn-group" role="group" aria-label="Button group with dropdown">
  <button type="button" class="btn btn-success">Button 1</button>
  <button type="button" class="btn btn-success">Button 2</button>
  <div class="btn-group">
    <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action 1</a></li>
      <li><a class="dropdown-item" href="#">Action 2</a></li>
      <li><a class="dropdown-item" href="#">Action 3</a></li>
    </ul>
  </div>
</div>

এখানে dropdown-toggle ক্লাস এবং dropdown-menu ইউআই উপাদানগুলি ব্যবহার করে ড্রপডাউন তৈরি করা হয়েছে। এই ড্রপডাউন বোতামটি বাকি বোতামগুলোর সাথে গ্রুপে রয়েছে, এবং ব্যবহারকারী ড্রপডাউন অপশন থেকে একটি অ্যাকশন নির্বাচন করতে পারে।

Button Group with Sizes (সাইজ সহ)

বুটস্ট্রাপ ৫ এ আপনি বিভিন্ন বোতাম সাইজ ব্যবহার করে গ্রুপ করতে পারেন। এই সাইজগুলো হল btn-lg, btn-sm, এবং ডিফল্ট সাইজ।

উদাহরণ: Button Group with Sizes

<div class="btn-group" role="group" aria-label="Large button group">
  <button type="button" class="btn btn-warning btn-lg">Button 1</button>
  <button type="button" class="btn btn-warning btn-lg">Button 2</button>
  <button type="button" class="btn btn-warning btn-lg">Button 3</button>
</div>

<div class="btn-group" role="group" aria-label="Small button group">
  <button type="button" class="btn btn-info btn-sm">Button 1</button>
  <button type="button" class="btn btn-info btn-sm">Button 2</button>
  <button type="button" class="btn btn-info btn-sm">Button 3</button>
</div>

এখানে দুটি বোতাম গ্রুপ রয়েছে: একটি বড় সাইজের বোতাম (large) এবং একটি ছোট সাইজের বোতাম (small)।

Button Group with Alignment (অ্যালাইনমেন্ট সহ)

বুটস্ট্রাপ ৫ এ button group এর বোতামগুলোকে কেন্দ্রস্থলে, ডানদিকে অথবা বামদিকে সাজানোর জন্য btn-group এর সাথে d-flex, justify-content-center, justify-content-end ব্যবহার করতে পারেন।

উদাহরণ: Button Group with Alignment

<div class="btn-group d-flex justify-content-center" role="group" aria-label="Center aligned button group">
  <button type="button" class="btn btn-danger">Button 1</button>
  <button type="button" class="btn btn-danger">Button 2</button>
  <button type="button" class="btn btn-danger">Button 3</button>
</div>

এখানে বোতামগুলো justify-content-center ক্লাসের মাধ্যমে কেন্দ্রস্থলে সাজানো হয়েছে। আপনি চাইলে justify-content-start বা justify-content-end ব্যবহার করে বাম বা ডানদিকে সাজাতে পারবেন।

Button Group with Toolbar (টুলবার)

আপনি একাধিক button group ব্যবহার করে একটি toolbar (টুলবার) তৈরি করতে পারেন। এটি বিভিন্ন অপশন বা টুলসের সমষ্টি হিসেবে কাজ করে।

উদাহরণ: Button Group with Toolbar

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-secondary">Button 1</button>
    <button type="button" class="btn btn-outline-secondary">Button 2</button>
  </div>
  <div class="btn-group" role="group" aria-label="Second group">
    <button type="button" class="btn btn-outline-secondary">Button 3</button>
    <button type="button" class="btn btn-outline-secondary">Button 4</button>
  </div>
</div>

এখানে দুটি button group একত্রিত করে একটি toolbar তৈরি করা হয়েছে, যা বিভিন্ন টুলস বা অপশন প্রদর্শন করে।

সারাংশ

বুটস্ট্রাপের Button Groups ব্যবহার করে আপনি একাধিক বোতামকে একটি গ্রুপে সাজিয়ে সেগুলির মধ্যে সম্পর্ক প্রতিষ্ঠা করতে পারেন। এটি ব্যবহারকারীর জন্য আরো পরিষ্কার এবং সহজ ইন্টারফেস তৈরি করতে সহায়তা করে, যেখানে একাধিক অপশন একসাথে প্রদর্শিত হয়।

বুটস্ট্রাপ ৫ আপনাকে Button Toolbar এবং Vertical Button Groups এর মতো কাস্টমাইজেশন অপশন দেয়, যা ব্যবহারকারীর ইন্টারফেসে বাটনের উপস্থাপনাকে আরও কার্যকরী এবং সুন্দর করে তোলে। এই দুটি উপাদান আপনাকে বাটনগুলোর গ্রুপিং ও সজ্জা করতে সাহায্য করে, যাতে আপনি গ্রুপের মধ্যে বাটনগুলোকে একটি নির্দিষ্ট বিন্যাসে সাজাতে পারেন। নিচে এর ব্যবহার নিয়ে বিস্তারিত আলোচনা করা হলো।

Button Toolbar

Button Toolbar হল একটি উপাদান, যা একাধিক বাটনকে একটি লাইনে বা গ্রুপে সাজানোর জন্য ব্যবহৃত হয়। এটি বিশেষভাবে তখন দরকারি হয়, যখন একাধিক বাটনকে একটি নির্দিষ্ট আউটপুটে গ্রুপ করতে হয়, যেমন টুলবারে বিভিন্ন ফাংশন (যেমন কপি, পেস্ট, ডিলিট ইত্যাদি) রাখতে।

উদাহরণ: Button Toolbar ব্যবহার করা

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group me-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-primary">বাটন ১</button>
        <button type="button" class="btn btn-primary">বাটন ২</button>
        <button type="button" class="btn btn-primary">বাটন ৩</button>
    </div>
    <div class="btn-group" role="group" aria-label="Second group">
        <button type="button" class="btn btn-secondary">বাটন ৪</button>
        <button type="button" class="btn btn-secondary">বাটন ৫</button>
    </div>
</div>

এখানে, btn-toolbar ব্যবহার করা হয়েছে পুরো টুলবারকে গ্রুপ করার জন্য, এবং এর মধ্যে দুটি btn-group রয়েছে। প্রতিটি btn-group একসাথে বাটনগুলোকে সাজিয়ে রাখে।

• me-2: বাটন গ্রুপের মধ্যে ব্যবধান (মার্জিন) যোগ করতে ব্যবহৃত।
• btn-group: বাটন গ্রুপে একসাথে বাটনগুলিকে সাজায়।

এইভাবে, টুলবারে একাধিক গ্রুপের মধ্যে বাটনগুলো সাজানো যাবে।

Vertical Button Groups

Vertical Button Groups হল একাধিক বাটনকে লম্বাভাবে (উল্লম্ব) সাজানোর উপায়। আপনি যখন একটি বাটন গ্রুপকে উল্লম্বভাবে সাজাতে চান, তখন btn-group-vertical ক্লাস ব্যবহার করবেন। এটি বিশেষভাবে দরকারি হয় যখন আপনি সাইডবারে একাধিক বাটন রাখতে চান এবং সেই বাটনগুলো উল্লম্বভাবে সাজানো উচিত।

উদাহরণ: Vertical Button Group ব্যবহার করা

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
    <button type="button" class="btn btn-primary">বাটন ১</button>
    <button type="button" class="btn btn-primary">বাটন ২</button>
    <button type="button" class="btn btn-primary">বাটন ৩</button>
    <button type="button" class="btn btn-primary">বাটন ৪</button>
</div>

এখানে, btn-group-vertical ক্লাস ব্যবহার করা হয়েছে, যার ফলে বাটনগুলো উল্লম্বভাবে সাজানো হবে। প্রতিটি বাটন একে অপরের নিচে থাকবে এবং তাদের মধ্যে কোনো পার্থক্য থাকবে না।

Button Toolbar এবং Vertical Button Groups একসাথে ব্যবহার করা

যখন আপনি উল্লম্ব বাটন গ্রুপের সাথে টুলবার ব্যবহার করতে চান, তখন উভয়কেই একত্রে ব্যবহার করতে পারেন। এর মাধ্যমে আপনি একই সময়ের মধ্যে হরাইজন্টাল এবং ভার্টিকাল বাটন গ্রুপ তৈরি করতে পারবেন।

উদাহরণ: Button Toolbar এবং Vertical Button Groups একত্রে

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group me-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-primary">বাটন ১</button>
        <button type="button" class="btn btn-primary">বাটন ২</button>
        <button type="button" class="btn btn-primary">বাটন ৩</button>
    </div>
    <div class="btn-group-vertical" role="group" aria-label="Vertical group">
        <button type="button" class="btn btn-secondary">বাটন ৪</button>
        <button type="button" class="btn btn-secondary">বাটন ৫</button>
        <button type="button" class="btn btn-secondary">বাটন ৬</button>
    </div>
</div>

এখানে, প্রথম গ্রুপটি হরাইজন্টালি সাজানো হয়েছে এবং দ্বিতীয় গ্রুপটি উল্লম্বভাবে। এই ধরনের গ্রুপিংয়ের মাধ্যমে আপনি আরও সুসংগঠিত এবং দৃষ্টিনন্দন ইউজার ইন্টারফেস তৈরি করতে পারবেন।

সারাংশ

বুটস্ট্রাপ ৫ এর Button Toolbar এবং Vertical Button Groups ক্লাসগুলো আপনাকে বাটনগুলোকে একত্রে সাজাতে এবং গ্রুপ করতে সহায়তা করে। Button Toolbar একটি হরাইজন্টাল লেআউট তৈরি করে, যেখানে একাধিক বাটন একসাথে সাজানো থাকে, আর Vertical Button Groups উল্লম্বভাবে বাটনগুলোকে সাজায়। এই উপাদানগুলো ইন্টারফেসে কার্যকরী এবং আকর্ষণীয় উপাদান তৈরি করতে সাহায্য করে।